<template>
    <view class="container">
        <view class="fist-part back-fff">
            <view class="w">
                <view class="inpBox" >

                    <input type="text" confirm-type="search" :placeholder="holder" maxlength='50' v-model="keyword" @confirm='goSearch' />

                    <view class="right-box">

                        <view class="search-btn transBg" @click="goSearch">
                            <text class="iconfont icon-settings"></text>
                        </view>
                    </view>

                </view>
            </view>
        </view>
        <view class="w">
            <view class="historyBox">
                <view class="historyTop" :class=" historyLen ? '' : 'hide' ">
                    <text class="i">最近搜索</text>
                    <image class="deletHistory" src="/static/images/delet.png" alt="" @click="deleFunc" mode='widthFix'></image>
                </view>
                <view class="historyRecord" v-if='historyLen'>
                    <view class="li" v-for='item,idx in historyArr' :key="idx" @click='gogo(item)'>
                        <text >{{item}}</text>
                    </view>
                </view>
                <view class="noHisTory" v-else>暂无记录</view>
            </view>

            <view class="historyBox">
                <view class="historyTop">
                    <text class="i col-3 b">热门搜索</text>
                    <!-- <image class="deletHistory" src="/static/images/delet.png" alt="" @click="deleFunc" mode='widthFix'></image> -->
                </view>
                <view class="historyRecord" >
                    <view class="li" v-for='item,idx in hotKeyArr' :key="idx" @click='gogo(item.name)'>
                      <img src="/static/images/icon_home_hot.png" class="hotImg" alt="">  <text >{{item.name}}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>

</template>

<script>

import { History } from '@/utils/tools'
import { HotSearchKey } from '@/api/http';

export default {
    data () {
        return {
            keyword: '',
            focusKey: true, //聚焦显示搜索
            historyArr: [],
            historyKey: 'shop',
            hotKeyArr:[]
        }
    },
    computed: {
        historyLen () {
            return this.historyArr.length > 0
        }
    },
    onShow () {

    },
    onLoad (option) {
        // 监听页面加载的生命周期函数

        this.historyArr = History.get( this.historyKey ) || []

        this.initHotFunc()
      
    },
    methods: {
        initHotFunc () {

            HotSearchKey({
                "pageNum": 1,
                "pageSize": 10,
            }).then(res =>{

                console.log('999999',res)

                this.hotKeyArr = res.data

            })
        },
        bindfocusFunc (e) {

            this.focusKey = true
        },
        bindblurFunc () {
            this.focusKey = false
        },
        goSearch () {

            var keys = this.keyword.replace(/ /g, "")
            this.keyword = keys

            if (!keys) {
                uni.showToast({
                    title: '关键字不能为空',
                    icon: 'none',
                    duration: 1000,
                });
                return;
            }

            if (/[`~!@#$%^&*_\-+=<>?:"\/'\\[\]·~！@#￥%……&*——\-+=？：.]/im.test(keys)) {
                uni.showToast({
                    title: '关键字不能包含特殊字符',
                    icon: 'none',
                    duration: 2000,
                });
                return false;
            }
            this.links(keys)
        },
        deleFunc () {
            uni.showModal({
                content: '是否清空历史查询纪录',
                confirmText: '清空',
                cancelText: '点错了',
                success: (obj) => {
                    if (obj.confirm) {
                        History.remove(this.historyKey)
                        this.historyArr = []
                    }
                }
            });
        },
        gogo (keyword) {

            this.links(keyword)
        },
        links (keys) {

            History.set(this.historyKey, keys)

            uni.navigateTo({
                url: '/pages/list/index?keys=' + keys 
            });

        },

    }
}
</script>

<style scoped lang="scss">
/**
 * @file index.css
 * @author Jun
 */

.fist-part {
    padding: 20rpx 0;
}
.inpBox {
    /* padding: 20rpx auto 0; */
    box-sizing: border-box;
    width: 680rpx;
    height: 84rpx;
    border-radius: 20rpx;
    overflow: hidden;
    display: flex;
    align-items: center;
    line-height: 84rpx;
}
.inpBox image {
    margin: 0rpx 18rpx 0;
    width: 36rpx;
}
.inpBox input {
    flex: 1;
    /* width: 480rpx; */
    height: 84rpx;
    font-size: 28rpx;
    border: none;
    outline: none;
    background: none;
    transition: all 0.4s;
    background: #f6f6f6;
    padding-left: 30rpx;
    border-radius: 20rpx;

}
/* .inpBox.focusKey input{
  width: 480rpx;
} */
.inpBox.focusKey button {
    opacity: 1;
}
.inpBox button {
    float: right;
    width: 120rpx !important;
    height: 84rpx;
    line-height: 84rpx;
    transition: all 1s;
    font-size: 28rpx;
    opacity: 0;
    padding: 0;
    text-align: center;
    
    background-color: #272639;
}
.historyBox {
    padding: 36rpx 6rpx 0 6rpx;
    overflow: hidden;
    min-height: 300rpx;
}
.historyTop {
    overflow: hidden;
    height: 32rpx;
}
.historyTop .i {
    float: left;
    font-size: 28rpx;
    color: #666;
    line-height: 28rpx;
    font-style: normal;
}
.historyTop image {
    float: right;
    width: 28rpx;
}
.historyRecord {
    margin-top: 10rpx;
    overflow: hidden;
    width: calc( 100% + 32rpx);
}
.historyRecord .li {
    float: left;
    margin-top: 32rpx;
    margin-right: 32rpx;
    padding: 12rpx 22rpx;
    font-size: 28rpx;
    line-height: 28rpx;
    text-align: center;
    background: #fff;
    border-radius: 8rpx;
    color: #333;
}
.noHisTory {
    margin-top: 10rpx;
    font-size: 28rpx;
    color: #666;
}
/* 下拉 */
.inpBox .typeBox {
    position: relative;
    border-radius: 60rpx;
    font-size: 22rpx;
    width: 160rpx;
    box-sizing: border-box;
    /* background-color: #eaeeae; */
    height: 100%;
    padding: 0 50rpx 0 20rpx;
    margin-right: 20rpx;
}

.inpBox .typeBox .iconfont {
    position: absolute;
    right: 20rpx;
    top: 50%;
    font-size: 24rpx;
    transform: translateY(-50%);
    color: #565656;
}
.inpBox .typeBox::after {
    position: absolute;
    content: " ";
    right: 0;
    top: 50%;
    margin-top: -14rpx;
    height: 28rpx;
    width: 2rpx;
    background-color: #eaeaea;
}

.right-box {
    display: flex;
    width: 90rpx;
    align-items: center;
    line-height: 1;
    margin-left: 10rpx;
}
.right-box .cate {
    display: inline-block;
    /* margin-right: 20rpx; */
    padding: 20rpx 14rpx 20rpx;
}
.right-box .search-btn {
    display: inline-block;
    padding: 20rpx 20rpx 20rpx 20rpx;
    border-radius: 20rpx;
}
.right-box .search-btn .iconfont {
    font-size: 46rpx;
    color: #fff;
}
.cateBox {
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 14rpx;
    color: #272639;
}
.hotImg{
    width: 24rpx;
    height: 24rpx;
    margin-right: 10rpx;
}
</style>
